<script lang="ts" setup>
import { Page } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';
import { watch, ref } from 'vue';
import Dayjs from 'dayjs';
import {
    Card,
    Descriptions,
    DescriptionsItem,
} from 'ant-design-vue';

// 定义 props 接收 id
const props = defineProps<{
    formData?: any;
}>();
// 监听 id 变化，当 id 传入时执行相关逻辑
watch(() => props.formData, async (formData) => {
    if (formData) {
        console.log('接收到的 formData:', formData);
    }
}, { immediate: true });

</script>

<template>
    <Page>
        <div class="mt-4 flex flex-col gap-4 md:flex-row">
            <!-- 左侧：建立连接、发送消息 -->
            <Card :bordered="false" class="md:w-2/2 w-full">
                <template #title>
                    <div class="flex items-center">
                        <span class="ml-2 text-lg font-medium">离岗记录</span>
                    </div>
                </template>
                <div class="mb-2 flex items-center rounded-lg p-3">
                    <div>
                        <IconifyIcon class="m-2 text-2xl" icon="lucide:book-marked" />
                    </div>
                    <span class="mr-2 text-xl font-medium">识别信息</span>
                </div>
                <Descriptions :column="2" bordered :label-style="{ width: '138px' }">
                    <DescriptionsItem label="员工姓名">{{ formData?.employee?.name }}</DescriptionsItem>
                    <DescriptionsItem label="头像">
                        <a-avatar  size="large" :src="formData?.employee?.avatar" />
                    </DescriptionsItem>
                    <DescriptionsItem label="员工工号">{{ formData?.userid }}</DescriptionsItem>
                    <DescriptionsItem label="部门">{{ formData?.employee?.deptNames?.split(',').pop()?.trim() || '' }}</DescriptionsItem>
                    <DescriptionsItem label="岗位职称">{{ formData?.employee?.title }}</DescriptionsItem>
                    <DescriptionsItem label="手机号码">{{ formData?.employee?.mobile }}</DescriptionsItem>
                    <DescriptionsItem label="电子邮箱">{{ formData?.employee?.email }}</DescriptionsItem>
                    <DescriptionsItem label="员工类型">{{ formData?.employee?.empType }}</DescriptionsItem>
                    <DescriptionsItem label="工作公司">{{ formData?.employee?.workComp }}</DescriptionsItem>
                    <DescriptionsItem label="身份证">{{ formData?.employee?.idCard }}</DescriptionsItem>
                    <DescriptionsItem label="上级负责人">{{ formData?.employee?.managerName }}</DescriptionsItem>
                </Descriptions>

                <div class="mb-2 flex items-center rounded-lg p-3">
                    <div>
                        <IconifyIcon class="m-2 text-2xl" icon="lucide:book-marked" />
                    </div>
                    <span class="mr-4 text-xl font-medium">离岗情况</span>
                </div>
                <Descriptions :column="2" bordered :label-style="{ width: '138px' }">
                    <DescriptionsItem label="离岗时间">
                        <template v-if="formData?.startTime && formData.startTime !== 0">
                            {{ Dayjs(formData.startTime).format('YYYY-MM-DD HH:mm:ss') }}
                        </template>
                    </DescriptionsItem>
                    <DescriptionsItem label="离岗时长min">{{ formData?.duration }}</DescriptionsItem>
                    <!-- 没有数据先不展示 -->
                    <!-- <DescriptionsItem label="岗位识别照片" :span="2">
                        <a-image :width="200" src="https://aliyuncdn.antdv.com/vue.png" />
                    </DescriptionsItem>
                    <DescriptionsItem label="识别记录时间">2023-01-01 10:00</DescriptionsItem> -->

                </Descriptions>



            </Card>
        </div>
    </Page>
</template>
